{% extends "page.html" %}

{% block head %}
<meta id="base-url" data-url="{{base_url}}">
<meta id="badge-base-url" data-url="{{badge_base_url}}">
<script src="{{static_url("dist/bundle.js")}}"></script>
{{ super() }}
{% endblock head %}

{% block main %}
<div id="main" class="container">
  <div class="row">
    <div class="col-lg-10 col-lg-offset-1">
      {% block header %}
      <div id="header" class="text-center">
        <h3>Turn a Git repo into a collection of interactive notebooks</h3>
        <div id="explanation">
          Have a repository full of Jupyter notebooks? With Binder, open those notebooks in an executable environment, making your code immediately reproducible by anyone, anywhere.
        </div>
      </div>
      <div id="tutorials" class="text-center">
        <h4>New to Binder? Get started with a <a href="https://the-turing-way.netlify.app/communication/binder/zero-to-binder.html" target="_blank">Zero-to-Binder tutorial</a> in Julia, Python, or R.</h4>
      </div>
      {% endblock header %}

      {% block form %}
      <form id="build-form" class="form jumbotron">
        <h4 id="form-header" class='row'>Build and launch a repository</h4>
        <input type="hidden" id="provider_prefix" value="{{repo_providers.keys() | list | first}}"/> 
        <div class="form-group row">
          <label for="repository">{{(repo_providers.values() | list | first).labels.text}}</label>
          <div class="input-group">
            <div class="input-group-btn" id="url-type-btn">
              <button type="button" class="btn btn-secondary dropdown-toggle"
                data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                title="Specify source of repository"
              >
              <span id="provider_prefix-selected">
                {{(repo_providers.values() | list | first).display_name}}
              </span>
              <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" id="provider_prefix_sel">
                {% for provider_prefix, provider in repo_providers.items() %}
                  <li class="dropdown-item" value={{provider_prefix}}><a href="#">{{provider.display_name}}</a></li>
                {% endfor %}
              </ul>
            </div>
            <input class="form-control" type="text" id="repository" data-lpignore="true" placeholder="{{(repo_providers.values() | list | first).labels.text}}"/>
          </div>
        </div>
        <div class="form-row row">
          <div class="form-group col-md-4">
            <label for="ref">{{(repo_providers.values() | list | first).labels.tag_text}}</label>
            <input class="form-control" type="text" id="ref" placeholder="HEAD"/>
          </div>
          <div class="form-group col-md-6">
            <label for="filepath">Path to a notebook file (optional)</label>
            <div class="input-group">
              <input class="form-control" type="text" id="filepath"
                placeholder="Path to a notebook file (optional)"
              />
              <div class="input-group-btn" id="url-or-file-btn">
                <button type="button" class="btn btn-secondary dropdown-toggle"
                  data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                  title="Specify whether the path to open is a URL or a file"
                >
                <span id="url-or-file-selected">
                {{ 'URL' if urlpath else 'File' }}
                </span>
                <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li class="dropdown-item"><a href="#">File</a></li>
                  <li class="dropdown-item"><a href="#">URL</a></li>
                </ul>
              </div>
            </div>
          </div>

          <div class="form-group col-md-2">
            <div class="btn-group" id="launch-buttons">
              <button id="submit" class="btn-submit" type="submit">launch</button>
            </div>
          </div>
        </div>

        <!--url section-->
        <div class="url row">
            <div class="dropdownmenu">
              <label>Copy the URL below and share your Binder with others:</label>
            </div>
            <div class="url-row">
              <pre id="basic-url-snippet" data-default="Fill in the fields to see a URL for sharing your Binder."
              >Fill in the fields to see a URL for sharing your Binder.</pre>
              <img class="icon clipboard" src="{{static_url("images/copy-icon-black.svg")}}" data-clipboard-target="#basic-url-snippet" alt="Copy to clipboard">
            </div>
        </div>

        <div class="badges row">
            <div class="dropdownmenu" id="toggle-badge-snippet">
              <label>Expand to see the text below, paste it into your README to show a binder badge: <img id="badge" src="{{static_url("images/badge_logo.svg")}}"></label>
              <a id="badge-link"></a>
              <a href="#" title="show badge snippets"><span id="badge-snippet-caret" class="glyphicon glyphicon-triangle-right"></span></a>
            </div>
            <div id="badge-snippets" class="hidden">
              <!--Markdown section-->
              <div  class="badge-snippet-row">
                 <pre id="markdown-badge-snippet" data-default="Fill in the fields to see the markdown badge snippet."></pre>
                 <img class="icon" src="{{static_url("images/markdown-icon.svg")}}">
                 <img class="icon clipboard"
                    src="{{static_url("images/copy-icon-black.svg")}}"
                    data-clipboard-target="#markdown-badge-snippet"
                    alt="Copy markdown link to clipboard">
              </div>
              <!--RST section-->
              <div  class="badge-snippet-row">
                  <pre id="rst-badge-snippet" data-default="Fill in the fields to see the rST badge snippet."></pre>
                  <img class="icon" src="{{static_url("images/rst-icon.svg")}}">
                  <img class="icon clipboard" src="{{static_url("images/copy-icon-black.svg")}}"
                    data-clipboard-target="#rst-badge-snippet"
                    alt="Copy rst link to clipboard">
              </div>
            </div>
        </div>

        <div id="build-progress" class="progress on-build hidden row">
          <div id="phase-failed" class="progress-bar progress-bar-danger progress-bar-striped hidden" style="width: 100%">
            Failed. Try refreshing this page in a few seconds.
          </div>
          <div id="phase-waiting" class="progress-bar progress-bar-danger progress-bar-striped active hidden" style="width: 10%">
            Waiting
          </div>
          <div id="phase-already-built" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 90%">
            Already built!
          </div>
          <div id="phase-building" class="progress-bar progress-bar-warning progress-bar-striped active hidden" style="width: 40%">
            Building
          </div>
          <div id="phase-pushing" class="progress-bar progress-bar-info progress-bar-striped active hidden" style="width: 40%">
            Pushing
          </div>
          <div id="phase-launching" class="progress-bar progress-bar-success progress-bar-striped active hidden" style="width: 10%">
            Launching
          </div>
        </div>

        <div id="log-container" class="panel panel-default on-build hidden row">
          <div id="toggle-logs" class="panel-heading">
            Build logs
            <button type="button" class="btn btn-link btn-xs pull-right toggle">show</button>
            <a id="view-raw-logs" class="btn btn-link btn-xs pull-right" target="_blank">view raw</a>
          </div>
          <div class="panel-body hidden">
            <div id="log"></div>
          </div>
        </div>
      </form>
      {% endblock form %}
    </div>
  </div>
  {% block how_it_works %}
  <div id="how-it-works">
    <h3 class="text-center">How it works</h3>

    <div class="row">
      <div class="col-md-1 col-md-offset-2 point-container">
        <span class="point point-orange">1</span>
      </div>
      <div class="col-md-7 front">
        <span class="front-em">Enter your repository information</span><br />Provide in the above form a URL or a GitHub repository that contains Jupyter notebooks, as well as a branch, tag, or commit hash. Launch will build your Binder repository. If you specify a path to a notebook file, the notebook will be opened in your browser after building.
      </div>
    </div>

    <div class="row">
      <div class="col-md-1 col-md-offset-2 point-container">
        <span class="point point-red">2</span>
      </div>
      <div class="col-md-7 front">
        <span class="front-em">We build a Docker image of your repository</span><br />Binder will search for a dependency file, such as requirements.txt or environment.yml, in the repository's root directory (<a href="http://mybinder.readthedocs.io/en/latest/using.html#preparing-a-repository-for-binder">more details on more complex dependencies in documentation</a>). The dependency files will be used to build a Docker image. If an image has already been built for the given repository, it will not be rebuilt. If a new commit has been made, the image will automatically be rebuilt.
      </div>
    </div>

    <div class="row">
      <div class="col-md-1 col-md-offset-2 point-container">
        <span class="point point-blue">3</span>
      </div>
      <div class="col-md-7 front">
        <span class="front-em">Interact with your notebooks in a live environment!</span><br />A <a href="https://jupyterhub.readthedocs.io/en/latest/">JupyterHub</a> server will host your repository's contents. We offer you a reusable link and badge to your live repository that you can easily share with others.
      </div>
    </div>
  </div>
  {% endblock how_it_works %}
</div>
{% endblock main %}

{% block footer %}
{{ super () }}
<script type="text/javascript">
indexMain();
</script>
{% endblock footer %}
